import React from 'react'
import {Link} from 'react-router-dom'
import {observer,inject} from "mobx-react";
import * as url from '../../../util/api'
import http from '../../../util/http'
import {Row, Col, Menu, Dropdown, DatePicker, Input, Button, Table, Tooltip} from 'antd';
import {
    DownOutlined,
    EllipsisOutlined,
    FileTextFilled,
    SafetyCertificateFilled
} from '@ant-design/icons';
import './ReturnOrder.css'
// import axios from "axios";


const {Search} = Input;
const {RangePicker} = DatePicker;


function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
    console.log('onOk: ', value);
}

const columns = [
    {
        title: '退单号',
        dataIndex: 'orderNumber',
    },
    {
        title: '下单时间',
        dataIndex: 'orderTime',
        sorter: (a, b) => a.age - b.age,
    },
    {
        title: '客户名称',
        dataIndex: 'customerName',
        sorter: (a, b) => a.age - b.age,

    },
    {
        title: '金额',
        dataIndex: 'orderMainPrice',
    },

    {
        title: '状态',
        dataIndex: 'myOrderAuditStatus',
        className: 'statusClass',
    },
    {
        title: '退款状态',
        dataIndex: 'outStatus',
    },
    {
        title: '',
        key: 'action',
        align: 'right',

        render: () => (
            <span>
        <span style={{marginRight: 16}}>
            <Dropdown overlay={actionMenu} placement="bottomRight">
       <EllipsisOutlined className={'tableItemAction'}/>
    </Dropdown>
           </span>
      </span>
        ),
    },
];
const actionMenu = (
    <Menu>
        <Menu.Item>
            <Link to={'/homepage/returnOrderDetail'}><FileTextFilled/> 退单详情</Link>
        </Menu.Item>
        <Menu.Item>
            <Link to={'/returnOrderCheck'}><SafetyCertificateFilled/> 审核</Link>
        </Menu.Item>
        <Menu.Item>
            <Link to={'/returnOrderToVoid'}><span className={'iconfont icon-zuofei'}/> 作废</Link>
        </Menu.Item>
    </Menu>
);
// const tableData = [
//     {
//         key: 0,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 1,
//         orderNo: 'DH-O-20200405-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 2,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 3,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 4,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 5,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-02 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 6,
//         orderNo: 'DH-O-20200407-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '欧尚超市',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//     {
//         key: 7,
//         orderNo: 'DH-O-20200404-2643',
//         orderTime: '2020-04-03 11:33',
//         customerName: '伊藤洋华堂',
//         money: 2000,
//         outOfStock: '备货中/待发货',
//         state: '待订单审核',
//         moneyState: '未收款',
//     },
//
//
// ];
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};
const data = [];
for (let i = 1; i <= 10; i++) {
    data.push({
        key: i,
        name: 'John Brown',
        age: `${i}2`,
        address: `New York No. ${i} Lake Park`,
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
}
@inject('orderStore')
@observer
class ReturnOrder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orderTypeText: '全部退单',
            perSize: 5,
            currentPage: 1,
            total:'',
            countPage:'',
            tableData: [],
        }
        this.handleMenuClick.bind(this)
    }
    orderDataExchange = (data) => {
        data.map(item => {
            item.clientId = '憨宝集团'
            let myOrderAuditStatus = ''

            switch (item.orderAuditStatus) {
                case 0:
                    myOrderAuditStatus = '待订单审核';
                    break;
                case 1:
                    myOrderAuditStatus = '待财务审核';
                    break;
                case 2:
                    myOrderAuditStatus = '待出库审核';
                    break;
                case 3:
                    myOrderAuditStatus = '待发货确认';
                    break;
                case 4:
                    myOrderAuditStatus = '待收货确认';
                    break;
                case 5:
                    myOrderAuditStatus = '退单审核';
                    break;
                case 6:
                    myOrderAuditStatus = '待收货确认';
                    break;
                case 7:
                    myOrderAuditStatus = '已完成';
                    break;
            }
            Object.assign(item, {myOrderAuditStatus: myOrderAuditStatus})
            Object.assign(item, {key: item.orderMainId})
            item.outStatus === 0 ? item.outStatus = '未退款' : item.outStatus = '已退款'
            item.receipt === 0 ? item.receipt = '待发货' : item.receipt = '已发货'
            switch (item.collectStatus) {
                case 0:
                    item.collectStatus = '未收款';
                    break;
                case 1:
                    item.collectStatus = '待审核';
                    break;
                case 2:
                    item.collectStatus = '已收款';
                    break;
            }


        })
    }
    changePage=(current, size)=>{
        console.log(current, size);
        this.setState({
            currentPage:current,
        })
        this.getOrderData(current,size)

    }
    handleMenuClick(e, str) {
        e.preventDefault();
        console.log('click', e, str);
        this.setState({
            orderTypeText: str,
        })

    }
    getOrderData = (currentPage,perSize) => {

        let obj = {perSize: perSize, currentPage: currentPage}
        http({
            url: url.orderReturn_order,
            method: 'post',
            data: obj,

        }).then(resp => {
            console.log(resp);
            console.log(typeof (resp.data.data));
            if (typeof (resp.data.data) === 'object' && resp.data.data.constructor === Array) {
                this.orderDataExchange(resp.data.data)
                data = (resp.data.data);

            } else if (typeof (resp.data.data) === 'object') {
                var data = [];
                Object.assign(resp.data.data, {key: 0});
                data.push(resp.data.data);
            }
            this.setState({
                tableData: data
            })
        }).catch(err => {
            console.log(err);
        })
    }
    componentDidMount() {
        this.getOrderCount();
        console.log('componentDidMount');
        this.getOrderData(this.state.currentPage,this.state.perSize);


    }
    getOrderCount = () => {

        http({
            url: url.totalCountForReturn,
            method: 'post',

        }).then(resp => {
            console.log(resp);
            let countPage=Math.ceil(resp.data.data.totalCounts/this.state.perSize)
            this.setState({
                countPage: countPage,
                total:resp.data.data.totalCounts,
            })
        }).catch(err => {
            console.log(err);
        })
    }
    render() {
        const {xScroll, yScroll, orderTypeText, tableData, ...state} = this.state;
        const orderTypeMenu = (
            <Menu>
                <Menu.Item>
                    <a className={'全部退单' === this.state.orderTypeText ? "active" : null} rel="noopener noreferrer"
                       href='true'
                       onClick={e => this.handleMenuClick(e, '全部退单')}>
                        全部退单
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'待处理退单' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '待处理退单')}>
                        待处理退单
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'未完成退单' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '未完成退单')}>
                        未完成退单
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'已完成退单' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '已完成退单')}>
                        已完成退单
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'已作废退单' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '已作废退单')}>
                        已作废退单
                    </a>
                </Menu.Item>
            </Menu>
        );
        const scroll = {};
        if (yScroll) {
            scroll.y = 240;
        }
        if (xScroll) {
            scroll.x = '100vw';
        }

        const tableColumns = columns.map(item => ({...item, ellipsis: state.ellipsis}));
        if (xScroll === 'fixed') {
            tableColumns[0].fixed = true;
            tableColumns[tableColumns.length - 1].fixed = 'right';
        }
        return (
            <div style={{padding: 10}}>
                <Row align='middle'>
                    <Col span={2}>
                        <Tooltip placement="bottomRight" title={orderTypeText} mouseLeaveDelay='0' mouseEnterDelay='.5'>
                            <Dropdown overlay={orderTypeMenu} trigger={['click']}>
                                <a className="dropdownItem currentOrderType" href='true'
                                   onClick={e => e.preventDefault()}>
                                    {orderTypeText} <DownOutlined/>
                                </a>
                            </Dropdown>
                        </Tooltip>
                    </Col>
                    <Col span={6}>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            placeholder={['起始时间', '结束时间']}
                            onOk={onOk}
                        />
                    </Col>
                    <Col span={6} style={{paddingLeft: 10}}>
                        <Search
                            placeholder="请输入退单号/客户名称"
                            onSearch={value => console.log(value)}
                            style={{width: 300}}

                        />
                    </Col>
                    <Col span={6} offset={4} align='right'>
                        <Button style={{
                            marginLeft: 20,
                            width: 80,
                            borderRadius: 4,
                            backgroundColor: '#12C09F',
                            color: 'white'
                        }}><Link to={'/homepage/AddNewReturnOrder'}>新增</Link></Button>
                    </Col>

                </Row>
                <Row style={{marginTop: 10}}>
                    <Table
                        rowSelection={{
                            ...rowSelection,
                        }}
                        pagination={{position: ['none', 'bottomRight'], pageSize:this.state.perSize,
                            current:this.state.currentPage,
                            total:this.state.total,onChange:this.changePage}}
                        columns={columns}
                        dataSource={tableData}
                        className='table'
                        onRow={(record) => {
                            return {
                                onClick: () => {
                                    console.log(record)
                                    this.props.orderStore.setData('orderMainId', record.orderMainId)
                                }
                            }
                        }
                        }
                    />
                </Row>
            </div>


        )
    }
}

export default ReturnOrder